﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>购物车</title>
    <meta name="keywords" content="DeathGhost"/>
    <meta name="description" content="DeathGhost"/>
    <meta name="author" content="DeathGhost,deathghost@deathghost.cn">
    <link rel="icon" href="../images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script src="../js/html5.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
    <script src="../js/vue.min.js"></script>
    <script>
        $(document).ready(function () {
            $("nav .indexAsideNav").hide();
            $("nav .category").mouseover(function () {
                $(".asideNav").slideDown();
            });
            $("nav .asideNav").mouseleave(function () {
                $(".asideNav").slideUp();
            });
        });
    </script>
</head>
<body>
<!--header-->
<header>
    <!--topNavBg-->
    <div class="topNavBg">
        <div class="wrap">
            <!--topLeftNav-->
            <ul class="topLtNav">
                <li><a href="login.html" class="obviousText">亲，请登录</a></li>
                <li><a href="register.html">注册</a></li>
                <li><a href="#">移动端</a></li>
            </ul>
            <!--topRightNav-->
            <ul class="topRtNav">
                <li><a href="user.html">个人中心</a></li>
                <li><a href="cart.html" class="cartIcon">购物车<i>0</i></a></li>
                <li><a href="favorite.html" class="favorIcon">收藏夹</a></li>
                <li><a href="user.html">商家中心</a></li>
                <li><a href="article_read.html" class="srvIcon">客户服务</a></li>
                <li><a href="union_login.html">联盟管理</a></li>
            </ul>
        </div>
    </div>
    <!--logoArea-->
    <div class="wrap logoSearch">
        <!--logo-->
        <div class="logo">
            <h1><img src="../images/logo.png"/></h1>
        </div>
        <!--search-->
        <div class="search">
            <ul class="switchNav">
                <li class="active" id="chanpin">产品</li>
                <li id="shangjia">商家</li>
                <li id="zixun">搭配</li>
                <li id="wenku">文库</li>
            </ul>
            <div class="searchBox">
                <form>
                    <div class="inputWrap">
                        <input type="text" placeholder="输入产品关键词或货号" style="width: 620px;height: 34px;"/>
                    </div>
                    <div class="btnWrap">
                        <input type="submit" value="搜索"/>
                    </div>
                </form>
                <a href="#" class="advancedSearch">高级搜索</a>
            </div>
        </div>
    </div>
    <!--nav-->
    <nav>
        <ul class="wrap navList">
            <li class="category">
                <a>全部产品分类</a>
                <dl class="asideNav indexAsideNav">
                    <dt><a href="channel.html">女装</a></dt>
                    <dd>
                        <a href="#">夏装新</a>
                        <a href="#">连衣裙</a>
                        <a href="#">T恤</a>
                        <a href="#">衬衫</a>
                        <a href="#">裤子</a>
                        <a href="#">牛仔裤</a>
                        <a href="#">背带裤</a>
                        <a href="#">短外套</a>
                        <a href="#">时尚外套</a>
                        <a href="#">风衣</a>
                        <a href="#">毛衣</a>
                        <a href="#">背心</a>
                        <a href="#">吊带</a>
                        <a href="#">民族服装</a>
                    </dd>
                    <dt><a href="channel.html">男装</a></dt>
                    <dd>
                        <a href="#">衬衫</a>
                        <a href="#">背心</a>
                        <a href="#">西装</a>
                        <a href="#">POLO衫</a>
                        <a href="#">马夹</a>
                        <a href="#">皮衣</a>
                        <a href="#">毛衣</a>
                        <a href="#">针织衫</a>
                        <a href="#">牛仔裤</a>
                        <a href="#">外套</a>
                        <a href="#">夹克</a>
                        <a href="#">卫衣</a>
                        <a href="#">风衣</a>
                        <a href="#">民族风</a>
                        <a href="#">原创设计</a>
                        <a href="#">大码</a>
                        <a href="#">情侣装</a>
                        <a href="#">开衫</a>
                        <a href="#">运动裤</a>
                        <a href="#">工装裤</a>
                    </dd>
                </dl>
            </li>
            <li>
                <a href="homepage.html" class="active">首页</a>
            </li>
            <li>
                <a href="#">时尚搭配</a>
            </li>
            <li>
                <a href="channel.html">原创设计</a>
            </li>
            <li>
                <a href="channel.html">时尚代购</a>
            </li>
            <li>
                <a href="channel.html">民族风</a>
            </li>
            <li>
                <a href="information.html">时尚搭配</a>
            </li>
            <li>
                <a href="library.html">搭配知识</a>
            </li>
            <li>
                <a href="#">促销专区</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
        </ul>
    </nav>

</header>
<script>
    $(document).ready(function () {
        //测试效果，程序对接如需变动重新编辑
        $(".switchNav li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
        $("#chanpin").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入产品关键词或货号");
        });
        $("#shangjia").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入商家店铺名");
        });
        $("#zixun").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文章内容");
        });
        $("#wenku").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文库内容");
        });
    });

</script>
<div id="cartApp">
    <section class="wrap" style="margin-top:20px;overflow:hidden;">
        <table class="table">
            <tr>
                <td style='text-align: center;'><input id="selectAll" type="checkbox" @click="selectAll()"/></td>
                <th style='text-align: center;'>产品</th>
                <th style='text-align: center;'>名称</th>
                <th style='text-align: center;'>颜色</th>
                <th style='text-align: center;'>尺码</th>
                <th style='text-align: center;'>单价</th>
                <th style='text-align: center;'>数量</th>
                <th style='text-align: center;'>小计</th>
                <th style='text-align: center;'>操作</th>
            </tr>
            <tr v-for="(item,index) in goodsList">
                <td style='text-align: center;' :id="index"><input type="checkbox" name="check"
                                                                   @click="selectCheckBox($event,index)"/></td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <a :title="'于'+carts[index].time+'加入购物车'"><img :src="item.cover"
                                                                   style="width:50px;height:50px;"/></a>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <p rowspan=$rowspan style='vertical-align: middle;text-align: center;'>{{item.name}}</p>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <p rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                        {{parameters[index].color}}</p>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <p rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                        {{parameters[index].specification}}</p>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <span rowspan=$rowspan style='vertical-align: middle;text-align: center;' class="rmb_icon">{{item.price}}</span>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <input rowspan=$rowspan style='vertical-align: middle;text-align: center;' type="button"
                           value="-"
                           class="jj_btn" @click="reduceCount(carts[index])"/>
                    <input rowspan=$rowspan style='vertical-align: middle;text-align: center;width: 60px;'
                           value=type="text" readonly class="num" :value="carts[index].number"/>
                    <input rowspan=$rowspan style='vertical-align: middle;text-align: center;' type="button"
                           value="+"
                           class="jj_btn"
                           @click="addCount(carts[index],parameters[index].stock)"/>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <strong rowspan=$rowspan style='vertical-align: middle;text-align: center;' class="rmb_icon">{{item.price*carts[index].number}}</strong>
                </td>
                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    <a rowspan=$rowspan style='vertical-align: middle;text-align: center;'
                       @click="deleteCart(carts[index].id)">删除</a>
                </td>
            </tr>
        </table>
        <div class="paging" style="text-align:right">
            <span>第{{page.currentPage}}/{{page.totalPage}}页</span>&nbsp;&nbsp;
            <span>总记录数：{{page.totalCount}}&nbsp;&nbsp;每页显示:{{page.pageSize}}</span>&nbsp;&nbsp;
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li v-if="page.currentPage!==1">
                        <span @click="getCart(1)">首页</span>
                        <span @click="getCart(page.currentPage-1)" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </span>
                    </li>
                    <li v-else class="disabled">
                        <span>首页</span>
                        <span aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </span>
                    </li>
                    <li v-if="page.currentPage!==page.totalPage && page.totalPage!==0">
                                <span @click="getCart(page.currentPage+1)" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </span>
                        <span @click="getCart(page.totalPage)">尾页</span>
                    </li>
                    <li v-else class="disabled">
                                <span aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </span>
                        <span>尾页</span>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="order_btm_btn">
            <a href="homepage.html" class="link_btn_01 buy_btn"/>继续购买</a>
            <a class="link_btn_02 add_btn" @click="selectOrder"/>共计金额<strong
                class="rmb_icon">{{totalPrice}}</strong>立即结算</a>
        </div>
    </section>
</div>
<!--footer-->
<footer>
    <!--help-->
    <ul class="wrap help">
        <li>
            <dl>
                <dt>消费者保障</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>新手上路</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>付款方式</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>服务保障</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
    </ul>
    <dl class="wrap otherLink">
        <dt>友情链接</dt>
        <dd><a href="#" target="_blank">素材网站</a></dd>
        <dd><a href="#/pins/24448.html">HTML5模块化后台管理模板</a></dd>
        <dd><a href="#/pins/15966.html">绿色清爽后台管理系统模板</a></dd>
        <dd><a href="#/pins/14931.html">黑色的cms商城网站后台管理模板</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">前端博客</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">博客</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">新码笔记</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">DethGhost</a></dd>
        <dd><a href="#">当当</a></dd>
        <dd><a href="#">优酷</a></dd>
        <dd><a href="#">土豆</a></dd>
        <dd><a href="#">新浪</a></dd>
        <dd><a href="#">钉钉</a></dd>
        <dd><a href="#">支付宝</a></dd>
    </dl>
    <div class="wrap btmInfor">
        <p>© 2013 DeathGhost.cn 版权所有 网络文化经营许可证：浙网文[2013]***-027号 增值电信业务经营许可证：浙B2-200***24-1 信息网络传播视听节目许可证：1109***4号</p>
        <address>联系地址：陕西省西安市雁塔区XXX号</address>
    </div>
</footer>
<script type="text/javascript">
    new Vue({
        el: "#cartApp",
        data: {
            page: {},
            parameters: [],
            goodsList: [],
            carts: [],
            totalPrice: 0,
            address:{}
        },
        mounted: function () {
            this.getCart(1);
            this.getAddress();
        },
        methods: {
            getCart: function (number) {
                let _this = this;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/CartController/getCartGoods",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id,
                        currentPage: number
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.page = result.data.page;
                            _this.goodsList = result.data.goodsList;
                            _this.carts = result.data.cartList;
                            _this.parameters = result.data.parameterList;
                            console.log(result);
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }

                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });

            },
            deleteCart: function (id) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/CartController/deleteCart",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                _this.getCart(_this.page.currentPage);
                                alert("删除成功");
                            } else {
                                alert("删除失败");
                            }

                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            addCount: function (cart, stock) {
                let _this = this;
                if (cart.number >= stock) {
                    alert("库存不足");
                    return;
                }
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/CartController/updateCart",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: cart.id,
                        number: cart.number + 1
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                _this.getCart(_this.page.currentPage);
                                alert("添加成功");
                            } else {
                                alert("添加失败");
                            }

                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            reduceCount: function (cart) {
                let _this = this;
                if (cart.number <= 1) {
                    alert("数量不能为0");
                    return;
                }
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/CartController/updateCart",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: cart.id,
                        number: cart.number - 1
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                _this.getCart(_this.page.currentPage);
                                alert("减少成功");
                            } else {
                                alert("减少失败");
                            }

                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            selectAll: function () {
                let s = document.getElementById("selectAll");
                let checks = document.getElementsByName("check");
                if (s.checked === true) {
                    let sum = 0;
                    for (let i = 0; i < checks.length; i++) {
                        checks[i].checked = true;
                        sum += this.goodsList[i].price * this.carts[i].number;
                    }
                    this.totalPrice = sum;
                } else {
                    for (let i = 0; i < checks.length; i++) {
                        checks[i].checked = false;
                    }
                    this.totalPrice = 0;
                }
            },
            selectCheckBox: function (event, index) {
                let check = event.currentTarget;
                if (check.checked === true) {
                    this.totalPrice += this.goodsList[index].price * this.carts[index].number;
                } else {
                    this.totalPrice -= this.goodsList[index].price * this.carts[index].number;
                }
            },
            selectOrder: function () {
                let checks = document.getElementsByName("check");
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                for (let i = 0; i < checks.length; i++) {
                    if (checks[i].checked) {
                        let dataModel={};
                        let order={};
                        let orderDetailsList=[];
                        let sum=this.carts[i].number*this.goodsList[i].price+this.goodsList[i].freight;
                        order.address=this.address.id;
                        order.store=this.goodsList[i].store;
                        order.user=user.id;
                        let orderDetails1={};
                        orderDetails1.goods=this.goodsList[i].id;
                        orderDetails1.number=this.carts[i].number;
                        orderDetails1.parameter=this.parameters[i].id;
                        orderDetailsList.push(orderDetails1);
                        for(let j=i+1;j < checks.length;j++){
                            if(checks[j].checked && this.goodsList[i].store===this.goodsList[j].store){
                                let orderDetails2={};
                                orderDetails2.goods=this.goodsList[j].id;
                                orderDetails2.number=this.carts[j].number;
                                orderDetails2.parameter=this.parameters[j].id;
                                orderDetailsList.push(orderDetails2);
                                checks[j].checked=false;
                                sum+=this.carts[j].number*this.goodsList[j].price+this.goodsList[j].freight;
                            }
                        }
                        order.total=sum;
                        dataModel.order=order;
                        dataModel.orderDetailsList=orderDetailsList;
                        $.ajax({
                            headers: {
                                token: $.cookie("token")
                            },
                            url: "http://localhost:8080/tshopping/OrderController/addOrder",
                            type: 'post',
                            dataType: 'json',
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify(dataModel),
                            success: function (result) {
                                if (result.code === 200) {
                                } else {
                                    alert("您的账号在另一地点登录,您已被迫下线");
                                    _this.logout();
                                }
                            },
                            error: function (result) {
                                console.log(result);
                                alert("世界上最遥远的距离就是没网！");
                            }
                        });
                    }
                }
                window.location="order_list.html";
            },
            getAddress:function(){
                let _this=this;
                let user=JSON.parse(window.sessionStorage.getItem("user"));
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/AddressController/getDefaultAddress",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        user: user.id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.address = result.data.address;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            logout: function () {
                /**
                 * 注销，清空所有cookie(或者只清空保存着token的Cookie就行)
                 */
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (let i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                //返回登录页面或者主页
                window.location.href = "login.html";
            }
        }
    })
</script>
</body>
</html>
